<template>
    <div class="common-size category_analysis_container">
        <page-head :pageHead="pageHeadData"></page-head>
        <div class="category_analysis_chart">
            <div class="category_analysis_chart_box">
                <div ref="useAgeLimitDom_1" class="chart-box">

                </div>
                <div class="y-name">设备数量(台)</div>
            </div>
        </div>
        <h4 v-html="treatmentStr"></h4>
        <div class="detail-title">非医疗设备品类分析</div>

        <div class="category_analysis_chart">
            <div class="category_analysis_chart_box">
                <div ref="useAgeLimitDom_2" class="chart-box">

                </div>
                <div class="y-name">设备数量(台)</div>
            </div>
        </div>
        <h4 v-html="unTreatmentStr"></h4>


        <page-footer :pageFooter="pageFooterData"></page-footer>
    </div>
</template>

<script>
  import pageHead from './pageHead.vue'
  import PageFooter from "./pageFooter.vue";
  import {nuxtMixins} from '../assets/javascript/mixin'
  let echarts = require('echarts')
  export default {
    name: 'category_analysis',
    props: ['chartData'],
    mixins: [nuxtMixins],
    data() {
      return {
        defaultOption:{
          title: {
            show: true,
            text: '设备数量TOP5品类',
            left: 'center',
            bottom: '3%',
            textStyle: {
              color: '#666',
              fontWeight: 400
            }
          },

          backgroundColor: '#fff',
          xAxis: {
            type: 'category',
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisLabel: {
              textStyle: {
                color:'#989898'
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(247,248,248,0.5)', 'rgba(0,0,0,0)'],
              }
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
          },
          yAxis: {
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#989898'
              }
            },
            axisLine: {
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            }
          },
          series: [
            {
              name:'医疗',
              type:'bar',
              stack: '科室',
              barWidth: '40%',
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color:'#fff',
                    fontWeight: 'bolder'
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#9EC3E8' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#4E8AC9' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            }
          ]
        },
        pageTitle: '品类分析',
        detailTitle: '医疗设备品类分析'
      }
    },
    computed:{
      treatmentStr () {
        if (!this.chartData.TreatmentChartData) return ''
        return this.chartData.TreatmentChartData.totalStr
      },
      unTreatmentStr () {
        if(!this.chartData.unTreatmentChartData) return ''
        return this.chartData.unTreatmentChartData.totalStr
      }
    },
    created() {
    },
    mounted() {
      this.deviceNumChart()
    },
    methods: {
      deviceNumChart () {
        if(!this.chartData.TreatmentChartData) return
        const  TreatmentChartData = this.chartData.TreatmentChartData
        const treatmentOption= {};
        const unTreatmentOption = {}
        for(var k in this.defaultOption){
            treatmentOption[k]   = this.defaultOption[k]
            unTreatmentOption[k] = this.defaultOption[k]
        }
        treatmentOption.xAxis.data = []
        treatmentOption.series[0].data = []
        this.chartData.TreatmentChartData.x_data.forEach((item,index) => {
            treatmentOption.xAxis.data.push(item);
        })
        this.chartData.TreatmentChartData.y_data.forEach((item,index) => {
            treatmentOption.series[0].data.push(item);
        })
        this.liquidfillEchart = echarts.init(this.$refs.useAgeLimitDom_1)
        this.liquidfillEchart.setOption(treatmentOption)

        if(!this.chartData.unTreatmentChartData) return
        unTreatmentOption.xAxis.data = []
        unTreatmentOption.series[0].data = []
        this.chartData.unTreatmentChartData.x_data.forEach((item,index) => {
            unTreatmentOption.xAxis.data.push(item);
        })
        this.chartData.unTreatmentChartData.y_data.forEach((item,index) => {
            unTreatmentOption.series[0].data.push(item);
        })


        this.liquidfillEchart_2 = echarts.init(this.$refs.useAgeLimitDom_2)
        this.liquidfillEchart_2.setOption(unTreatmentOption)
      }
    },
    components: {
      PageFooter,
      pageHead
    }
  }
</script>

<style lang="scss">
    .category_analysis_container {
        .category_analysis_chart {
            margin-top: 10px;
            padding: 0 35px;
            .category_analysis_chart_box {
                height: 300px;
                position: relative;
                .chart-box {
                    width: 100%;
                    height: 100%;
                }
                .y-name {
                    position: absolute;
                    top: 35px;
                    right: 4%;
                    font-size: 12px;
                    color: #989898;
                }
            }
        }
        >h4{
            color: #666;
            text-align: center;
            width: 100%;
            padding: 20px 0 25px ;
            >b{
               color: #000;
            }
        }
        .detail-title{
            color: #0a122d;
            font-weight: 700;
            padding: 0 35px;
            margin: 30px 0 0 0;
        }
    }
</style>
